import React, {useCallback} from 'react'
import { Select, Divider } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import { TextWidget } from '@inbiz/react';
import { usePullWidth } from '../../../../store/hooks/usePullWidth';
import { useSearchUIState } from '../../../../store/hooks/useSearchUIState';
import { useSearchUIDispatch } from '../../../../store/hooks/useSearchUIDispatch';
import { useTabsConfig } from '../../../../store/hooks/useTabsConfig';
// 搜索范围-组件
const LabelConfigSelect = ({
  searchDom,
  smallPanelViewInputClassName,
  tagComponent
}: {
  searchDom?: React.RefObject<HTMLDivElement>;
  smallPanelViewInputClassName?: string,
  tagComponent?: React.ReactNode | null
}) => {
  const pullWidth = usePullWidth();

  const { selectShowTab, showGraph,showTag } = useSearchUIState();
  
  const updateUIState = useSearchUIDispatch();
  const tabsConfig = useTabsConfig();
  const showTabConfigs = tabsConfig.filter(item => item.isShow)
  const onHandleChange = useCallback(
    (guid) => {
      const record: any = tabsConfig.find((item) => item.guid === guid);
      let newShowGraph = Boolean(showGraph);
      if (!record?.keywordAtlas) {
        newShowGraph = false;
      }
      updateUIState({
        selectShowTab: record,
        showGraph: newShowGraph,
      });
    },
    [tabsConfig, updateUIState, showGraph],
  );

  return (
    <div onClick={(e) => {
      e.stopPropagation()
      updateUIState({
        showSearchResultPanel: false
      });
    }}>
      <Select
        bordered={false}
        className={'search-label-select'}
        dropdownClassName='searchIndexName'
        value={selectShowTab?.guid || showTabConfigs[0].guid}
        size="large"
        // suffixIcon={<InbizIcon className="show-more-icon" type="icon-ic-show_more" />}
        suffixIcon={<InbizIcon className="show-more-icon" type="icon-zhankai2" />}
        style={{ width: pullWidth }}
        listHeight={300}
        onChange={onHandleChange}
        getPopupContainer={() => searchDom?.current || document.body}
      // open
      >
        {showTabConfigs.map(
          (item) =>
          (
            <Select.Option key={item.guid} className="searchEngine-select-option">
              <TextWidget>{item.title}</TextWidget>
            </Select.Option>
          ),
        )}
      </Select>
      {smallPanelViewInputClassName && <Divider type="vertical" style={{ height: 16, background: '#ddd', margin: 0 }} />}
      {smallPanelViewInputClassName && showTag&& tagComponent}
    </div>
  );
};

export default LabelConfigSelect